<template>
  <div id="box">
    <el-card class="box-card">
      <div class="clearfix">
        <el-input v-model="query.id" class="ml inpWidth" placeholder="请输入车型编号" />
        <el-select v-model="query.allowableLoad" class="ml" placeholder="请输入应载重量">
          <el-option v-for="(item,index) in load" :key="index" :value="item.value" :label="item.name" />
        </el-select>
        <el-select v-model="query.allowableVolume" class="ml" placeholder="请选择应载体积">
          <el-option v-for="(item,index) in volume" :key="index" :value="item.value" :label="item.name" />
        </el-select>
        <el-input v-model="query.name" class="ml inpWidth" placeholder="请输入车辆类型" />
        <el-button type="primary" @click="getCarTypePageData">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-card>
    <el-card v-loading="loading" class="box-card card2">
      <div class="clearfix">
        <el-button type="primary" @click="add">新增车型</el-button>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="id" label="车型编号" width="180" />
          <el-table-column prop="name" label="车辆类型" />
          <el-table-column prop="num" label="车型数量" />
          <el-table-column prop="allowableLoad" label="应载重量（吨）" />
          <el-table-column prop="allowableVolume" label="应载体积（立方米）" />
          <el-table-column prop="measureLong" label="长（米）" />
          <el-table-column prop="measureWidth" label="宽（米）" />
          <el-table-column prop="measureHigh" label="高（米）" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
              <el-button type="text" style="color:red" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          :page-sizes="[1, 2, 3]"
          :page-size="query.pageSize"
          :current-page.sync="query.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="getCarTypePageData"
        />
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="flag" width="30%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="ruleForm.allowableLoad">
            <template slot="append">吨</template>
          </el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="ruleForm.allowableVolume">
            <template slot="append">立方</template>
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model="ruleForm.measureLong">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model="ruleForm.measureWidth">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model="ruleForm.measureHigh">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getCarTypePageDataAPI, getCarTypeDetailsAPI } from '@/api/carType'
import { Message, MessageBox } from 'element-ui'
export default {
  name: 'CarType',
  data() {
    return {
      loading: true,
      tableData: [],
      query: {
        page: 1, // 当前页
        pageSize: 3, // 当前页码显示多少条数据
        id: '', // 车型id
        name: '', // 车辆类型名称
        allowableLoad: '', // 车型载重
        allowableVolume: '' // 车型体积
      },
      total: 0,
      // 载重
      load: [
        { value: 'RANGE_LEVEL_1', name: '<1.8（吨）' },
        { value: 'RANGE_LEVEL_2', name: '1.8-6（吨）' },
        { value: 'RANGE_LEVEL_3', name: '6-14（吨）' },
        { value: 'RANGE_LEVEL_4', name: '14-30（吨）' },
        { value: 'RANGE_LEVEL_5', name: '30-50（吨）' },
        { value: 'RANGE_LEVEL_6', name: '50-100（吨）' },
        { value: 'RANGE_LEVEL_7', name: '100>（吨）' }
      ],
      // 体积
      volume: [
        { value: 'RANGE_LEVEL_1', name: '<3（m³）' },
        { value: 'RANGE_LEVEL_2', name: '3-5（m³）' },
        { value: 'RANGE_LEVEL_3', name: '5-10（m³）' },
        { value: 'RANGE_LEVEL_4', name: '10-15（m³）' },
        { value: 'RANGE_LEVEL_5', name: '15-30（m³）' },
        { value: 'RANGE_LEVEL_6', name: '30-50（m³）' },
        { value: 'RANGE_LEVEL_7', name: '50-80（m³）' },
        { value: 'RANGE_LEVEL_8', name: '80-150（m³）' },
        { value: 'RANGE_LEVEL_9', name: '150>（m³）' }
      ],
      flag: false, // 对话框显示隐藏
      ruleForm: {
        id: '',
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '', // 宽
        name: '' // 车辆类型名称
      },
      rules: {
        name: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { pattern: /^(?:[1-9]\d*|0)?(?:\.\d{1,2})?$/, message: '数字请保留两位小数', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { pattern: /^(?:[1-9]\d*|0)?(?:\.\d{1,2})?$/, message: '数字请保留两位小数', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { pattern: /^(?:[1-9]\d*|0)?(?:\.\d{1,2})?$/, message: '数字请保留两位小数', trigger: 'blur' }
        ]
      },
      title: '新增'
    }
  },
  created() {
    this.getCarTypePageData()
  },
  methods: {
    async getCarTypePageData() {
      const result = await getCarTypePageDataAPI(this.query)
      this.loading = false
      this.tableData = result.data.data.items
      this.total = +result.data.data.counts
    },
    // 当前页码最多显示几条数据发生改变时
    pageSizeChange(pageSize) {
      this.query.pageSize = pageSize
      this.getCarTypePageData()
    },
    // 当前页发生改变时
    pageChange(page) {
      this.query.page = page
      this.getCarTypePageData()
    },
    // 重置
    reset() {
      this.query.id = ''
      this.query.name = ''
      this.query.allowableLoad = ''
      this.query.allowableVolume = ''
      this.getCarTypePageData()
    },
    close() {
      this.allowableLoad = ''
      this.allowableVolume = ''
      this.measureHigh = ''
      this.measureLong = ''
      this.measureWidth = ''
      this.name = ''
      this.flag = false
    },
    add() {
      this.flag = true
      this.title = '新增'
    },
    submit() {
      // this.$refs.ruleForm.validate(async(isOK) => {
      //   if (isOK && this.title === '新增') {
      //     // 新增流程
      //     delete this.ruleForm.id
      //     await addCarTypeAPI(this.ruleForm)
      //     Message.success('接口新增不了，但是你成功完成了新增~^_^')
      //     this.flag = false
      //   } else if (isOK && this.title === '编辑') {
      //     // 编辑流程
      //     await updateCarTypeAPI(this.ruleForm)
      //     Message.success('接口修改不了，但是你成功完成了修改~^_^')
      //     this.flag = false
      //   } else {
      //     Message.success('接口坏了，但是你成功完成了业务~^_^')
      //     this.flag = false
      //   }
      // })
      Message.error('演示数据禁止更改或添加')
      this.flag = false
    },
    async edit(id) {
      const result = await getCarTypeDetailsAPI(id)
      this.ruleForm = result.data.data
      this.title = '编辑'
      this.flag = true
    },
    del(id) {
      MessageBox.confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮后的回调
        Message.error('绑定车辆的车型无法删除')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ml{
  margin-right: 20px;
}
.inpWidth{
  width: 24%;
}
.card2{
  margin-top: 20px;
}
.block{
  margin-top: 20px;
  text-align: center;
}
</style>
